<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./js/d3.v3.min.js"></script>
	<style type="text/css">
		svg{border: 1px solid #333;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//添加svg画布
			var svg=d3.select("body").append("svg")
						.attr("width",600)
						.attr("height",400)
			//定义距离
			var margin={left:30,right:30,top:30,bottom:30}

			//定义数据
			var arr=[100,120,90,60]

			//定义线性比例尺
			var max=d3.max(arr)
			var yScale=d3.scale.linear()
						.domain([0,max])
						.range([0,400-margin.top-margin.bottom])

			
			//添加分组，进行位置偏移
			var group=svg.append("g")
				.attr("transform","translate(30,30)")

			//绘制矩形
			group.selectAll("rect").data(arr).enter()
					.append("rect")
					.attr("x",(item,index)=>{
						return (50+20)*index
					})
					.attr("y",0)
					.attr("width","50")
					.attr("height",(item,index)=>{
						// return item
						return yScale(item)
					})
					.attr("fill","tomato")

			//填写文字
			group.selectAll("text").data(arr).enter()
					.append("text")
					.attr("x",(item,index)=>{
						return (50+20)*index
					})
					.attr("y",(item,index)=>{
						return yScale(item)
					})
					.text(item=>{
						return item;
					})
					.attr("dy",20)
					.attr("dx",10)

		}
	</script>
</head>
<body>

</body>
</html>